<template>
    <q-page class="m-auto w-full bg-pink-50 h-full" padding>
        <div class="text-h5">
            我的发布
        </div>
        <div class="w-full m-auto mt-10 bg-white h-screen rounded-lg  container grid grid-cols-4 gap-6 overflow-y-scroll">
            <div class=" hover:shadow-lg hover:cursor-pointer" v-for=" item in blogs.slice(0, 10)" :key="item">
                <div
                    class="max-w-sm h-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                    <div class="w-full h-2/3" @click="jumpToDetailPage(item)">
                        <img class="rounded-t-lg  w-full h-full " :src="item.pics" alt="" />
                    </div>
                    <div class="p-5 h-1/3">
                        <a class="flex justify-between">
                            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ item.name }}
                            </h5>
                            <span
                                class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
                                {{ item.vis === 0 ? '未审核' : '已审核' }}
                            </span>
                        </a>
                        <p class="mt-1 mb-3 font-normal text-gray-700 dark:text-gray-400">
                            <q-btn color="red-10" label="删除" @click="deleteBlog(item)" />
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </q-page>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { api } from 'src/boot/axios';
const router = useRouter()
const blogs = ref([])

let user_id = localStorage.getItem('user_id')
api.post('/blogs/get_one', { user_id: user_id }).then(res => {
    blogs.value = res.data.data
})
function jumpToDetailPage(queryItem) {
    router.push({
        name: 'detail',
        query: queryItem
    })
}
function deleteBlog(item) {
    api.post('/blogs/delete_one', { id: item.id }).then(res => {
        if (res.data.code === 200) {
            $q.notify({
                color: 'positive',
                position: 'top',
                message: '删除成功',
                icon: 'check'
            })
        } else {
            $q.notify({
                color: 'negative',
                position: 'top',
                message: '删除失败',
                icon: 'close'
            })
        }
    })
}
</script> 
 
<style scoped></style>